<template>
    <div class="user">
        <div v-if="userList.length > 0">
            <div v-for="(item, index) in userList" :key="index" class="u-wrapper" v-motion-slide-left>
                <img class="u-avatar" :src="proxy.globalInfo.imageUrl + item.avatar" />
                <div class="u-info">
                    <div class="u-name">{{ item.nickName }}</div>
                    <div class="u-tips">
                        <div>职位&nbsp;:&nbsp;&nbsp;{{ item.profession }}</div>
                        <div>博客&nbsp;:&nbsp;&nbsp;{{ item.blogCount }}篇</div>
                    </div>
                    <div class="u-content">
                        <div v-html="item.introduction"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="l-empty" v-else>
            <a-empty description="没有数据" />
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref } from "vue"
const { proxy } = getCurrentInstance();


const api = {
    "loadTeamUser": "view/loadTeamUser"
}
const userList = ref([]);
const loadUser = async () => {
    let result = await proxy._request({
        url: api.loadTeamUser,
    })
    if (!result) {
        return;
    }
    userList.value = result.data;
}
loadUser();

</script>

<style lang="scss" scoped>
.user {
    width: 100%;
    min-height: 100%;
    padding: 10px 30px 20px 30px;
    background-color: #fff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .u-wrapper {
        display: flex;
        padding-top: 20px;

        .u-avatar {
            width: 140px;
            height: 140px;
            border-radius: 50%;
        }

        .u-info {
            margin-left: 20px;

            .u-name {
                padding-top: 20px;
            }

            .u-tips {
                display: flex;
                padding: 14px 0;

                div {
                    padding-right: 30px;
                }
            }
        }
    }
}
</style>